<template>
  <div class="order-detail-page">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>会员中心</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 订单状态 -->
    <div class="order-status">
      <p>订单编号：{{ order.orderId }}</p>
      <p style="color: red; font-size: 20px;">付款成功</p>
      <el-steps :active="2" align-center>
        <el-step title="提交订单" icon="el-icon-edit"></el-step>
        <el-step title="付款成功" icon="el-icon-upload"></el-step>
        <el-step title="商品出库" icon="el-icon-sold-out"></el-step>
        <el-step title="等待收货" icon="el-icon-truck"></el-step>
        <el-step title="完成" icon="el-icon-check"></el-step>
      </el-steps>
    </div>

    <!-- 物流信息 -->
    <div class="logistics-info">
      <p><strong>送货方式：</strong>{{ order.shippingMethod }}</p>
      <p><strong>承运人：</strong>{{ order.carrier }}</p>
      <p><strong>货运单号：</strong>{{ order.trackingNumber }}</p>
      <ul class="logistics-timeline">
        <li v-for="(item, index) in order.logisticsTimeline" :key="index">
          <span>{{ item.date }} {{ item.time }}</span>
          <span>{{ item.status }}</span>
        </li>
      </ul>
    </div>

    <!-- 收货人信息 -->
    <el-card class="info-card">
      <div slot="header" class="clearfix">
        <span>收货人信息</span>
      </div>
      <div>
        <p><strong>收货人：</strong>{{ order.receiverName }}</p>
        <p><strong>地址：</strong>{{ order.address }}</p>
        <p><strong>手机号：</strong>{{ order.phoneNumber }}</p>
      </div>
    </el-card>

    <!-- 付款信息 -->
    <el-card class="info-card">
      <div slot="header" class="clearfix">
        <span>付款信息</span>
      </div>
      <div>
        <p><strong>付款方式：</strong>{{ order.paymentMethod }}</p>
        <p><strong>商品总额：</strong>¥{{ order.totalAmount }}</p>
        <p><strong>应支付金额：</strong>¥{{ order.finalAmount }}</p>
        <p><strong>运费金额：</strong>¥{{ order.shippingFee }}</p>
      </div>
    </el-card>

    <!-- 发票信息 -->
    <el-card class="info-card">
      <div slot="header" class="clearfix">
        <span>发票信息</span>
      </div>
      <div>
        <p><strong>发票类型：</strong>{{ order.invoiceType }}</p>
      </div>
    </el-card>

    <!-- 商品信息 -->
    <el-card class="info-card">
      <div slot="header" class="clearfix">
        <span>商品信息</span>
      </div>
      <el-table :data="order.items" style="width: 100%">
        <el-table-column prop="image" label="商品图片" width="80">
          <template #default="scope">
            <img :src="scope.row.image" alt="商品图片" style="width: 50px; height: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column label="小计">
          <template #default="scope">
            ¥{{ scope.row.price * scope.row.quantity }}
          </template>
        </el-table-column>
        <el-table-column label="实付">
          <template #default="scope">
            ¥{{ scope.row.price * scope.row.quantity }}
          </template>
        </el-table-column>
      </el-table>
      <div class="order-summary">
        <p><strong>商品总额：</strong>¥{{ order.totalAmount }}</p>
        <p><strong>活动优惠：</strong>¥{{ order.discount }}</p>
        <p><strong>运费：</strong>¥{{ order.shippingFee }}</p>
        <p><strong>应付总额：</strong><span style="color: red;">¥{{ order.finalAmount }}</span></p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 示例订单数据（实际应从后端获取）
const order = ref({
  orderId: '969126130',
  shippingMethod: '普通快递',
  carrier: '顺风快递',
  trackingNumber: '6480683374414',
  logisticsTimeline: [
    { date: '2025-6-17', time: '09:50:02', status: '货物已到达【杭州外单分拣中心】' },
    { date: '2025-6-17', time: '09:26:33', status: '拣货完毕，待出库交付亮亮快递公司，运单号为5302858232565' },
    { date: '2025-6-17', time: '08:03:28', status: '您提交了订单，请等待系统确认' }
  ],
  receiverName: '亮亮',
  address: '广东深圳市福田区福田小区A栋506',
  phoneNumber: '手机号189****1688',
  paymentMethod: '在线支付',
  totalAmount: 520.00,
  finalAmount: 520.00,
  shippingFee: 0.00,
  invoiceType: '不开发票',
  items: [
    { image: 'https://via.placeholder.com/50x50', name: '商品1', price: 347, quantity: 1 },
    { image: 'https://via.placeholder.com/50x50', name: '商品2', price: 189, quantity: 2 },
    { image: 'https://via.placeholder.com/50x50', name: '商品3', price: 442, quantity: 4 },
    { image: 'https://via.placeholder.com/50x50', name: '商品4', price: 377, quantity: 4 }
  ],
  discount: 0.00
});
</script>

<style scoped>
.order-detail-page {
  padding: 20px;
}

.order-status {
  margin-bottom: 20px;
}

.logistics-info {
  margin-bottom: 20px;
}

.logistics-timeline {
  list-style: none;
  padding: 0;
}

.logistics-timeline li {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.info-card {
  margin-bottom: 20px;
}

.order-summary {
  text-align: right;
  margin-top: 20px;
}
</style>